<template>
  <div>
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <van-card
        v-for="item in list"
        :key="item.id"
        class="card"
        @click="handle(item.id)"
        :thumb="item.img_url"
      >
        <div slot="title" class="title">{{item.title}}</div>
        <div slot="bottom" class="bottom">
          <div slot="price" class="time">
            <span>发表时间: {{item.add_time.substring(0,10)}}</span>
          </div>
          <div slot="footer" class="click">
            <span>点击: {{item.click}}</span>
          </div>
        </div>
      </van-card>
    </van-pull-refresh>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      // 新闻列表数据
      list: [],
      // 下拉刷新数据
      count: 0,
      isLoading: false
    };
  },
  created() {
    this.getnews();
  },
  methods: {
    // 获取新闻资讯
    getnews() {
      axios.get("/api/getnewslist").then(res => {
        if (res.data.status !== 0) {
          return this.$toast.fail("获取新闻资讯失败");
        }
        this.$toast.success("获取新闻资讯成功");
        console.log(res.data);
        this.list = res.data.message;
        console.log(this.list);
      });
    },
    // 跳转到新闻详情页面
    handle(id) {
      this.$store.commit("saveId", id);
      this.$router.push("/news/detail");
    },
    // 下拉刷新方法
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        this.count++;
        this.getnews();
      }, 500);
    }
  }
};
</script>

<style lang="less" scoped>
.card {
  background: #fff;
  border-bottom: 1px solid #eee;
  margin: 0 10px;
  padding: 10px;
}
.van-card .van-card__thumb {
  width: 42px;
  height: 42px;
}
.van-card__thumb {
  position: relative;
  -webkit-box-flex: 0;
  margin-right: 10px;
  flex: none;
}
.van-image {
  width: 100%;
  height: 100%;
}
.van-card .van-card__content {
  min-height: 0;
}
.title {
  height: 17px;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
}
.bottom {
  display: flex;
  justify-content: space-between;
  line-height: 30px;
  span {
    font-size: 12px;
    color: #226aff;
  }
}
</style>
